<template xmlns="http://www.w3.org/1999/html">
  <div class="predict">
    <h1>股票预测<br/></h1>
    <h2>当前日期:{{this.datenow}}<br/></h2>
    <el-input v-model="temptscode" placeholder="输入你的股票代码" style="width:20%;height:auto;"></el-input>
    <br/>
    <el-button v-on:click="renew">更新</el-button><br/>
    <el-button v-on:click="getData">预测</el-button>
    <h1>你预测的股票近期收盘价如下</h1><br/>
    <center><div id="chart" style="width: 500px;height: 300px"></div></center>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "predict",
  data() {
    return {
      temptscode: "",
      optionDummy: {
        xAxis: {
          type: 'category',
          data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 170, 190, 99, 122],
            type: 'line'
          }
        ]
      },
      chart: "",
      datenow: ""
    }
  },

  created() {
    this.datenow = this.getCurrentDate();
  },

  mounted() {
    this.chart = echarts.init(document.getElementById("chart"));
    this.chart.setOption(this.optionDummy);
  },

  methods: {
    getCurrentDate: function (){
      var dd = new Date();
      var year = dd.getFullYear();
      var month =
          dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
      var day = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
      return year + "-" + month + "-" + day;
    },

    getData: function () {
      axios({
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Accept': 'application/json'
        }, params: {"tscode": this.temptscode}, method: "get", url: "http://localhost:8081/stock/predict"
      })
          .then((response) => {
            alert("the data is" + JSON.stringify(response.data));//test
            this.optionDummy.series.data = JSON.stringify(response.data);
            console.log(this.optionDummy.series.data);
            this.chart.setOption(this.optionDummy);
          }, (response) => {
            alert(JSON.stringify(response.data));
            alert("no this stock!");
          });
    },

    renew: function () {
      axios({
        method: "get",
        url: "http://localhost:9080/crawl.json?spider_name=stock&crawl_args=%7B%22tscode%22%3A%20%22"+ this.temptscode + "%22%7D&url=https://finance.ifeng.com/app/hq/stock/sh000001/"
      }).then((response) => {
        alert("renew success!");
      }, (response) => {
        alert("renew!");
      });
    }
  }
}

</script>
